<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-select
          v-model="value"
          clearable
          placeholder="请选择"
          @change="selectChange"
        >
          <el-option label="已使用" value="1"> </el-option>
          <el-option label="未使用" value="0"> </el-option>
          <el-option label="已过期" value="2"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-input v-model="nickname" placeholder="请输入" clearable></el-input>
      </el-col>
      <el-col :span="8">
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          clearable
          v-model="coupon_title"
          @input="CouInp"
        >
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="id" width="180"> </el-table-column>
          <el-table-column prop="nickname" label="名称" width="180">
          </el-table-column>
          <el-table-column prop="type" label="获取方法"> </el-table-column>
          <el-table-column prop="status" label="状态"> </el-table-column>
          <el-table-column label="结束">
            <template slot-scope="scope">
              <i class="el-icon-circle-check" v-if="scope.row.is_fail == 0"></i>
              <i class="el-icon-close" v-else></i>
            </template>
          </el-table-column>
          <el-table-column prop="coupon_price" label="面值"> </el-table-column>
          <el-table-column prop="use_min_price" label="最低消费">
          </el-table-column>
          <el-table-column label="开始时间" fixed="right" width="200">
            <template slot-scope="scope">
              <div>
                {{ scope.row.add_time | time }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" fixed="right" width="200">
            <template slot-scope="scope">
              <div>
                {{ scope.row.end_time | time }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next,sizes"
          :total="total"
          :current-page="page"
          :page-size="limit"
          :page-sizes="[5, 8, 10]"
          @size-change="sizeChagne"
          @current-change="pageChange"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getHistoryList } from "../../api";
import moment from "moment";
export default {
  props: ["show"],
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 5,
      total: 0,
      status: "",
      coupon_title: "",
      nickname: "",
    };
  },
  filters: {
    time(val) {
      val *= 1000;
      return moment(val).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  methods: {
    selectChange(e) {
      this.status = e;
      this.getData();
    },
    sizeChagne(e) {
      this.limit = e;
      this.getData();
    },
    pageChange(e) {
      this.page = e;
      this.getData();
    },
    CouInp(e) {
      this.coupon_title = e;
      this.getData();
    },
    getData() {
      getHistoryList({
        status: this.status,
        coupon_title: this.coupon_title,
        nickname: this.nickname,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        if (res.data.status == 200) {
          this.total = res.data.data.count;
          this.tableData = res.data.data.list;
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="less" scoped></style>
